<template>
  <SearchTagBlock
    ref="historySearchComp"
    title="最近搜索"
    :get-list="getHistoriesSearchList"
  >
    <template #control>
      <van-icon name="delete-o" @click="handleClearHistories" />
    </template>
  </SearchTagBlock>
  <SearchTagBlock
    ref="hotSearchComp"
    title="热门搜索"
    :get-list="getHotSearchList"
  >
    <template #control>
      <span @click="handleToggleHotSearch">隐藏</span>
    </template>
  </SearchTagBlock>
</template>

<script setup lang="ts">
import AppSearchHeader from "./AppSearchHeader.vue";
import SearchTagBlock from "@/components/business/SearchTagBlock/index.vue";
import { ref, onMounted } from "vue";
import { getHotSearchApi } from "@/api/pro";
import { LS_Pro } from "@/utils/Common";

const historySearchComp = ref(null);
const hotSearchComp = ref(null);
const btnText = ref("隐藏");

const getHotSearchList = () => {
  return getHotSearchApi();
};

const getHistoriesSearchList = () => {
  return LS_Pro.get("histories") || [];
};

// 清除历史记录
const handleClearHistories = () => {
  LS_Pro.remove("histories");
  historySearchComp.value?.refresh();
};

// 切换热门显示隐藏
const handleToggleHotSearch = () => {
  // 让子组件隐藏
  hotSearchComp.value?.toggle();
  btnText.value = btnText.value === "隐藏" ? "显示" : "隐藏";
};
</script>

<style scoped></style>
